﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="../internal.js"></script>
    <link rel="stylesheet" type="text/css" href="audio.css" />
    <link href="fileinput/fileinput.css" rel="stylesheet" />
    <style>
        .btn {
            display: inline-block;
            padding: 6px 1em;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.5em;
            border-radius: 3px;
            border: 1px solid transparent;
            cursor: pointer;
        }

            .btn.btn-block {
                display: block;
                width: 100%;
                padding-right: 0;
                padding-left: 0;
            }

            .btn.btn-lg {
                padding: 10px 16px;
                font-size: 18px;
                line-height: 1.5em;
                border-radius: 6px;
            }

            .btn.btn-default {
                background: #fff;
                border-color: #ccc;
                color: #333;
            }

                .btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active, .btn.btn-default.active {
                    color: #333;
                    background-color: #ebebeb;
                    border-color: #adadad;
                }

            .btn.btn-success {
                background: #5cb85c;
                border-color: #4cae4c;
                color: #fff;
            }

                .btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active, .btn.btn-success.active {
                    color: #fff;
                    background-color: #47a447;
                    border-color: #398439;
                }

            .btn.btn-blue {
                background: #428bca;
                border-color: #357ebd;
                color: #fff;
            }

                .btn.btn-blue:hover, .btn.btn-blue:focus, .btn.btn-blue:active, .btn.btn-blue.active {
                    color: #fff;
                    background-color: #3276b1;
                    border-color: #285e8e;
                }

            .btn.btn-grey {
                background: #b9b9b9;
                border-color: #909090;
                color: #fff;
            }

                .btn.btn-grey:hover, .btn.btn-grey:focus, .btn.btn-grey:active, .btn.btn-grey.active {
                    color: #fff;
                    background-color: #a7a7a7;
                    border-color: #707070;
                }

        .btn-primary {
            color: #fff;
            background-color: #337ab7;
            border-color: #2e6da4;
        }

        .btn {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="audioTab">
            <div id="tabHeads" class="tabhead">
                <span tabsrc="audio" data-content-id="audio" class="focus">
                    <var id="lang_tab_insertA"></var>
                </span>
            </div>
            <div id="tabBodys" class="tabbody">
                <div id="audio" class="panel focus">
                    <form>
                    <div class="top">
                        <div class="row">
                            <label for="audioTitle">
                                <var id="lang_audio_title"></var>
                            </label>
                            <span>
                                <input class="text" id="audioTitle" type="text"></span>
                        </div>
                        <div class="row">
                            <label for="audioSelectMethod">
                                <var id="lang_audioSelectMethod"></var>
                            </label>
                            <span>
                                <label for="audio_selectMethod_Local" class="radio">
                                    <input type="radio" id="audio_selectMethod_Local" name="SelectAudioMethod" value="local" checked="checked" /><var id="lang_audio_selectMethod_Local"></var>
                                </label>
                                <label for="audio_selectMethod_Upload" class="radio">
                                    <input type="radio" id="audio_selectMethod_Upload" name="SelectAudioMethod" value="upload" /><var id="lang_audio_selectMethod_Upload"></var>
                                </label>
                            </span>
                        </div>
                        <div class="row" id="row_audio_selectMethod_Local">
                            <label for="audioUploadUrl">
                                <var id="lang_audioUploadUrl"></var>
                            </label>
                            <span>
                                <input id="audiofile-0" class="file" type="file">
                                <input type="hidden" id="audioUploadUrl" name="audioUploadUrl" />
                                <input type="hidden" id="audioUploadComplete" name="ImageUploadComplete" value="0" /></span>
                        </div>
                        <div class="row" id="row_audio_selectMethod_Upload">
                            <label for="audioUrl">
                                <var id="lang_audio_url"></var>
                            </label>
                            <span>
                                <input class="text" id="audioUrl" type="text">
                            </span>
                        </div>
                        <div class="row">
                            <div id="audioUploadErrorTips"></div>
                        </div>
                        <div class="row">
                            <div id="errorTips"></div>
                        </div>
                    </div></form>
                </div>
            </div>
        </div>
    </div>

    <!-- jquery -->
    <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>

    <!-- audio -->
    <script type="text/javascript" src="audio.js"></script>
    <!-- fileinput -->
    <script type="text/javascript" src="fileinput/fileinput.js"></script>
    <script type="text/javascript">
        $("#audiofile-0").attr('name', editor.getOpt('audioFieldName'));
        $("#audiofile-0").fileinput({
            allowedFileExtensions: ['mp3','m4a'],
            browseLabel: "选择语音",
            removeLabel: "清除语音",
            uploadLabel: "上传语音",
            dropZoneEnabled: false,
            showCancel: false,
            showCaption: false,
            showPreview: false,
            elErrorContainer: $('#audioUploadErrorTips'),
            //showUpload: false,
            //msgProgress: "上传 {index} / {files} - {name} - {percent}% 完成.",
            uploadUrl: editor.getActionUrl(editor.getOpt('audioActionName')) //+ "&callback=fileuploaded"
        });

        //批量上传完成
        $('#audiofile-0').on('filebatchuploadsuccess', function (event, data, files, extra) {
            if (data.response.state != "SUCCESS") {
                $('#errorTips').html(data.response.state);
                //alert(data.state);
            }else{
                //layer.msg('上传成功！', 1, 1);
                $('#audioUploadComplete').val(1);
                $('#audioUrl').val(data.response.url);
                $('#errorTips').html(data.response.state);
            }
        });

        function fileuploaded(data) {
            if (data.state != "SUCCESS") {
                $('#errorTips').html(data.state);
                //alert(data.state);
            }
        }
        $('#audiofile-0').on('fileuploadfailed', function (event, data, files, extra) {
            try {
                eval(data.responseText);
            } catch (e) {

            } 
            
        });

    </script>
</body>
</html>
